<!-- 功能图标组件 -->

<template>
	<view>
		<view class="center positionR" @click="$emit('active',id)">
			<view class="flex positionR overflow" :style="{
					width: width,
					height: height,
					background: gradients ? 'linear-gradient('+ background +','+ colorRgba(background,0.7) +')' : background,
					boxShadow: boxShadow ? '2rpx 4rpx 8rpx 0 ' + colorRgba(background,0.7) : '',
					borderRadius: borderRadius,
				}">
				<!-- 图标 -->
				<h-icon :icon="icon" extraClass="margin-auto" :color="iconColor" :size="iconSize" />
				<!-- 背景装饰 -->
				<view v-if="decorate">
					<view class="positionA h-bg-top bg-white opacity3 radius-50">
					</view>
					<view class="positionA h-bg-bottom bg-white opacity3 radius-50">
					</view>
				</view>
			</view>
			<!-- 微标 -->
			<!-- <u-badge shape="horn" max="99" :value="badge" absolute :offset="[-10,right(badge)]">
			</u-badge> -->
		</view>
	</view>
</template>

<script>
	/**
	 * @description 功能图标组件
	 * @example h-function-icon></h-function-icon>
	 * 
	 * @property {String}			id					功能图标id
	 * @property {String}			icon				矢量图标代码 （默认 h-biaoti ）
	 * @property {String}			iconSize			图标大小（默认 50rpx ）
	 * @property {String}			iconColor			图标颜色（默认 #fff ）
	 * @property {String}			width				背景宽度（默认 100rpx ）
	 * @property {String}			height				背景高度（默认 100rpx ）
	 * @property {String}			background			背景颜色（默认 #e64758 ）
	 * @property {Boolean}			gradients			是否开启背景渐变色（默认 true ）
	 * @property {Boolean}			boxShadow			是否开启背景阴影（默认 true ）
	 * @property {Boolean}			decorate			是否开启装饰（默认 true ）
	 * @property {String}			borderRadius		背景圆角（默认 20rpx ）
	 * @property {Number}			badge				微标（默认 0 ,为0时将不显示徽标） 
	 * 使用uview-ui 的徽标组件，相关api可参考uview-ui 文档，可自行修改组件徽标
	 * 
	 * @event {Function} active			点击图标时触发（返回参数为传入的id）
	 */
	export default {
		// 小程序穿透样式
		options: {
			styleIsolation: 'shared'
		},
		name: 'h-funciton-icon',
		data() {
			return {}
		},
		props: {
			// 功能图标id
			id: {
				type: String,
				default: ''
			},
			// 矢量图标代码
			icon: {
				type: String,
				default: 'h-biaoti'
			},
			// icon 图标大小
			iconSize: {
				type: String,
				default: '50rpx'
			},
			// icon 图标颜色
			iconColor: {
				type: String,
				default: '#fff'
			},
			// 背景宽度
			width: {
				type: String,
				default: '100rpx'
			},
			// 背景高度
			height: {
				type: String,
				default: '100rpx'
			},
			// 背景颜色
			background: {
				type: String,
				default: '#e64758'
			},
			// 是否开启背景渐变色
			gradients: {
				type: Boolean,
				default: true
			},
			// 是否开启背景阴影
			boxShadow: {
				type: Boolean,
				default: true
			},
			// 是否开启装饰
			decorate: {
				type: Boolean,
				default: true
			},
			// 背景圆角
			borderRadius: {
				type: String,
				default: '20rpx'
			},
			// 微标
			badge: {
				type: Number,
				default: 0
			},
		},
		methods: {
			// 微标偏移量
			right(value) {
				if (0 < value && value < 10) {
					return -12
				} else if (9 < value && value < 100) {
					return -16
				} else if (value >= 100) {
					return -30
				}
			},
			// 颜色转换
			colorRgba(sHex, alpha = 1) {
				// 十六进制颜色值的正则表达式
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
				/* 16进制颜色转为RGB格式 */
				let sColor = sHex.toLowerCase()
				if (sColor && reg.test(sColor)) {
					if (sColor.length === 4) {
						var sColorNew = '#'
						for (let i = 1; i < 4; i += 1) {
							sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
						}
						sColor = sColorNew
					}
					//  处理六位的颜色值
					var sColorChange = []
					for (let i = 1; i < 7; i += 2) {
						sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
					}
					if (alpha == 1) {
						return sColorChange.join(',')
					} else {
						return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
					}
				} else {
					return sColor
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.center {
		text-align: center;
	}

	.flex {
		display: flex;
	}

	.positionR {
		position: relative;
	}

	.positionA {
		position: absolute;
	}

	.overflow {
		overflow: hidden;
	}

	.margin-auto {
		margin: auto;
	}

	.bg-white {
		background: #ffffff;
	}

	.opacity3 {
		opacity: .3;
	}

	.radius-50 {
		border-radius: 50%;
	}

	.h-bg-top {
		width: 100rpx;
		height: 100rpx;
		top: -50rpx;
		left: -40rpx;
	}

	.h-bg-bottom {
		width: 60rpx;
		height: 60rpx;
		bottom: -30rpx;
		right: -20rpx;
	}
</style>